<template>
  <!-- 知识管理-关系管理页面 -->
  <el-row :gutter="20" class="entity-manage">
    <el-col :span="5" class="entity-type">
      <type-tree :tree-data="optionsType" @select-node="updateEntityType" />
    </el-col>
    <el-col :span="19" class="entity-list">
      <div class="server-main">
        <el-form :inline="true" v-model="metaData" class="search-form">
          <!-- <el-form-item label="所属类别" class="form-input">
              <el-cascader v-model="metaData.searchType" placeholder="" :props="{ checkStrictly: true }"
                :options="optionsType" clearable filterable></el-cascader>
            </el-form-item> -->
          <el-form-item label="实体名称" class="form-input">
            <el-input
              v-model="metaData.searchVal"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="所属概念" class="form-input">
              <el-input
                v-model="metaData.relationVal"
                placeholder="所属概念"
                clearable
              ></el-input>
            </el-form-item> -->
          <el-form-item label="状态" class="status form-input">
            <el-select v-model="metaData.status">
              <el-option label="全部" value="2"></el-option>
              <el-option label="启用" value="0"></el-option>
              <el-option label="禁用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit"
              style="width: 60px; height: 32px; padding: 0"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <div class="server-table">
          <div class="table-title">
            <span class="table-title-text">关系管理</span>
            <el-button type="primary" size="small" @click="openDia()"
              >新增关系</el-button
            >
          </div>
          <el-table
            :data="tableList"
            class="map-manage"
            size="medium"
            v-loading="loading"
            :header-cell-style="{ background: '#F3F4F8', color: '#000000' }"
            :cell-style="{ color: '#333333' }"
          >
            <el-table-column
              type="index"
              prop="id"
              label="ID"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-table :data="scope.row.relationList">
                  <el-table-column prop="headEntityName" label="头实体">
                    <template slot-scope="scope">
                      <img
                        :src="scope.row.headEntityName"
                        v-if="scope.row.headEntityStatus == 1"
                        style="width: 80px"
                      />
                      <el-popover
                        placement="top-start"
                        width="100"
                        trigger="hover"
                        v-else
                        :content="scope.row.headEntityName"
                      >
                        <span slot="reference">{{
                          scope.row.headEntityName
                        }}</span>
                      </el-popover>
                    </template></el-table-column
                  >
                  <el-table-column
                    prop="relationName"
                    label="关系"
                  ></el-table-column>
                  <el-table-column prop="tailEntityName" label="尾实体">
                    <template slot-scope="scope">
                      <img
                        :src="scope.row.tailEntityName"
                        v-if="scope.row.tailEntityStatus == 1"
                        style="width: 80px"
                      />
                      <el-popover
                        placement="top-start"
                        width="100"
                        trigger="hover"
                        v-else
                        :content="scope.row.tailEntityName"
                      >
                        <span slot="reference">{{
                          scope.row.tailEntityName
                        }}</span>
                      </el-popover>
                    </template></el-table-column
                  >
                  <el-table-column
                    prop="confidence"
                    label="置信度"
                  ></el-table-column>
                  <el-table-column
                    label="操作"
                    align="center"
                    class="operation"
                  >
                    <template slot-scope="prop">
                      <el-link
                        :underline="false"
                        class="handle-button"
                        type="primary"
                        @click="goDetail('edge', prop.row)"
                        >边属性</el-link
                      >
                      <el-link
                        :underline="false"
                        class="handle-button"
                        type="primary"
                        @click.native.prevent="
                          deleteRelation(prop.row, scope.$index, prop.$index)
                        "
                        >删除</el-link
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              prop="entityName"
              label="实体名称"
              width="300"
              align="center"
            >
              <template slot-scope="scope">
                <img
                  :src="scope.row.entityName"
                  v-if="scope.row.entityStatus == 1"
                  style="width: 80px"
                />
                <el-popover
                  placement="top-start"
                  width="100"
                  trigger="hover"
                  v-else
                  :content="scope.row.entityName"
                >
                  <span slot="reference">{{ scope.row.entityName }}</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="ontologyName"
              show-overflow-tooltip
              label="所属类别"
              align="right"
            ></el-table-column>
            <!-- <el-table-column
                prop="tailEntityName"
                show-overflow-tooltip
                label="尾实体"
                width="300"
                align="right"
              >
              </el-table-column> -->
            <el-table-column
              prop="confidence"
              label="实体置信度"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="relationNum"
              width="100"
              label="关系数量"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <i
                  class="little-circle-blue"
                  v-if="scope.row.status == '0'"
                ></i>
                <i class="little-circle-red" v-else></i>
                <span>{{ scope.row.status == "0" ? "启用" : "禁用" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="180"
              fixed="right"
              align="center"
              class="operation"
            >
              <template slot-scope="scope">
                <!-- <el-link
                    :underline="false"
                    style="border-right: 1px solid #ddd; padding-right: 10px"
                    class="handle-button"
                    type="primary"
                    @click="goDetail('edge', scope.row)"
                    >边属性</el-link
                  > -->
                <!-- <el-link
                    :underline="false"
                    class="handle-button"
                    type="primary"
                    @click.native.prevent="changeStatus(scope.row)"
                    >{{ scope.row.status == "0" ? "禁用" : "启用" }}</el-link
                  > -->
                <el-link
                  :underline="false"
                  style="border-right: 1px solid #ddd; padding-right: 10px"
                  class="handle-button"
                  type="primary"
                  @click="openDia(scope.row)"
                  >新增关系</el-link
                >
                <el-link
                  :underline="false"
                  style="border-right: 1px solid #ddd; padding-right: 10px"
                  class="handle-button"
                  type="primary"
                  @click.native.prevent="goEdit(scope.row.entityId)"
                  >编辑</el-link
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              class="table-pagination"
              background
              :small="true"
              layout="total, prev, pager, next,sizes, jumper"
              :total="total"
              :hide-on-single-page="!total"
              :page-size="metaData.pageSize"
              :pager-count="5"
              :page-sizes="[10, 20, 30]"
              :current-page="metaData.page"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            >
            </el-pagination>
          </div>
        </div>

        <el-dialog
          :title="title"
          :visible.sync="dialogVisible"
          width="560px"
          class="map-dialog common-dialog"
          :show-close="false"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
        >
          <el-form ref="relationForm" :model="mapForm1" label-width="80px" :rules="rules">
            <el-form-item label="头实体" prop="headName">
              <el-select
                class="autocomplete-input"
                v-model="mapForm1.headName"
                filterable
                ref="headSelectRef"
                value-key="entityId"
                reserve-keyword
                placeholder="请选择头实体"
                @change="(val) => getRelationById(val, 'head')"
                :loading="loading"
                :disabled="changeEntitydisAbled"
              >
                <el-option
                  v-for="item in selectProperty"
                  :key="item.entityId"
                  :label="item.entityName"
                  :value="item"
                >
                  <img
                    :src="item.entityName"
                    style="width: 20px"
                    v-if="item.entityStatus == 1"
                  />
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="尾实体" prop="endName">
              <el-select
                class="autocomplete-input"
                v-model="mapForm1.endName"
                filterable
                ref="endSelectRef"
                value-key="entityId"
                reserve-keyword
                placeholder="请选择尾实体"
                @change="(val) => getRelationById(val, 'end')"
                :loading="loading"
              >
                <el-option
                  v-for="item in tarTail"
                  :key="item.entityId"
                  :label="item.entityName"
                  :value="item"
                  ><img
                    :src="item.entityName"
                    style="width: 20px"
                    v-if="item.entityStatus == 1"
                  />
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关系名称" prop="relation">
              <!-- <el-autocomplete class="autocomplete-input" ref="relationInput" value-key="relationName"
                  v-model="mapForm1.relation" :fetch-suggestions="querySearchAsync" placeholder="请输入内容"
                  @select="handleSelectRelation" @blur="blurSelectRelation" @change="changeSelectRelation"></el-autocomplete> -->
              <el-select
                class="autocomplete-input"
                ref="relationInput"
                v-model="mapForm1.relation"
                filterable
                allow-create
                default-first-option
                value-key="relationId"
                reserve-keyword
                placeholder="请输入关键词"
                @change="changeSelectRelation"
                :loading="loading"
              >
                <el-option
                  v-for="item in relationOptions"
                  :key="item.relationId"
                  :label="item.relationName"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="置信度" prop="percentage">
              <!-- <el-input-number class="percentage" v-model="mapForm.percentage" controls-position="right" @change="handleChange" :min="0" :max="100"></el-input-number> -->
              <el-input
                v-model="mapForm.percentage"
                @input="formatCheck"
                class="percentage"
              >
                <!-- <i slot="suffix">%</i> -->
              </el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
        </el-dialog>
        <router-view></router-view>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import { EventBus } from "@/views/server/knowledge-management/eventBus";
import TypeTree from "./components/TypeTree.vue";
import { mapState } from "vuex";
export default {
  name: "MapManagement",
  components: { TypeTree },
  data: () => {
    const formatCheck = (rule, value, callback) => {
      if (!/^(0|1|(0\.\d{1,4}))$/g.test(value)) {
        callback(new Error("置信度只能是0或1或0~1之间的小数,小数最多四位"));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false, // 弹框的开关
      title: "新增关系", // 弹框名称
      loading: false,
      rules: {
        headName: [
          { required: true, message: '请输入头实体', trigger: ['blur', 'change']  },
        ],
        endName: [
          { required: true, message: '请输入尾实体', trigger: ['blur', 'change']  },
        ],
        relation: [
          { required: true, message: '请输入关系名称', trigger: ['blur', 'change']  },
        ],
        percentage: [
          { validator: formatCheck, trigger: ['blur', 'change'] },
          { required: true, message: '置信度不能为空'},
          { type: 'number', message: '置信度值必须为数字值' },
        ],
      },
      mapForm: {
        headName: "",
        relation: "",
        endName: "",
        percentage: 1,
      },
      mapForm1: {
        headName: "",
        relation: "",
        endName: "",
        percentage: 1,
      },
      metaData: {
        // searchType: [],
        searchVal: "", // 图谱名称
        relationVal: "",
        status: "2", // 状态
        page: 1, // 页码
        pageSize: 10, // 每页条数
      },
      selectKnowledge: "", // 选中的图谱的数据
      optionsType: [],
      tableList: [],
      total: 0,
      headOrTail: [], // 头尾实体
      relationCon: [],
      relationOptions: [], // 公有关系选项
      tailCon: [],
      tarRelation: {
        relationId: "",
        relationName: "",
      },
      tarTail: [],
      selectProperty: [],
      changeEntitydisAbled: false,
    };
  },
  computed: {},
  created() {
    this.$nextTick(() => {
      EventBus.$on("selectKnowledge", (val) => {
        this.selectKnowledge = val;
        this.relationList();
        // this.mapTree();
      });
    });
  },
  beforeDestroy() {
    EventBus.$off("selectKnowledge");
  },
  methods: {
    // 实体类变更
    updateEntityType(node) {
      this.metaData.searchType = node.value;
      this.onSubmit();
    },
    relationList() {
      this.loading = true;
      let params = {
        projectId: this.selectKnowledge.projectId,
        ontologyId: [].concat(this.metaData.searchType).pop() || "",
        ontologyAllId: [].concat(this.metaData.searchType).pop() || "",
        entityName: this.metaData.searchVal,
        relationName: this.metaData.relationVal,
        status: this.metaData.status,
        pageNum: this.metaData.page,
        pageSize: this.metaData.pageSize,
      };
      this.$axios
        .post(this.$api.knowledgeMap.getRelationList, params)
        .then((res) => {
          this.loading = false;
          const { data, code, pageDto, msg } = res.data;
          if (code === 200) {
            let arr = (data && data.list) || [];
            this.tableList = arr.map((item) => {
              item.relationNum = item.relationList.length;
              return item;
            });
            this.total = data && data.total;
          } else {
            this.$message.warning(msg);
          }
        });
    },
    async getEntityByRelationId(id) {
      await this.$axios
        .get(`${this.$api.knowledgeMap.getEntityByRelationId}/${id}`)
        .then((res) => {
          const { data, code, message } = res.data;
          if (code === 200) {
            this.tailCon = data;
            // this.tarTail = data;
          } else {
            this.$message.warning(message);
          }
        });
    },
    // 修改当前页码
    handleCurrentChange(page) {
      this.metaData.page = page;
      this.relationList();
    },
    handleSizeChange(size) {
      this.metaData.pageSize = size;
      this.relationList();
    },
    // 跳转详情页
    goDetail(type, row) {
      console.log("row", row);
      this.$router.push({
        path: "/manage/relationManagement/relation",
        query: {
          id: row.kgEntityRelationSpoId,
          head: row.headerEntityName,
          tail: row.tailEntityName,
          relation: row.relationName,
        },
      });
    },
    goEdit(id) {
      this.$router.push({
        path: "/manage/entityManagement/edit",
        query: {
          id: id,
        },
      });
    },
    // 修改状态
    async changeStatus(item) {
      let params = {
        kgEntityRelationSpoId: item.kgEntityRelationSpoId,
        status: item.status == "0" ? "1" : "0",
      };
      this.$confirm(
        `是否${item.status === 0 ? "禁用" : "启用"}当前关系`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          let res = await this.$axios.get(
            this.$api.knowledgeMap.disableRelation,
            {
              params,
            }
          );
          if (res.data.code === 200) {
            this.$message.success(`${item.status === 0 ? "禁用" : "启用"}成功`);
            this.relationList();
            return;
          }
          this.$message.warning(res.data.message);
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
    // 关系删除
    async deleteRelation(item, pIndex, cIndex) {
      let params = {
        kgEntityRelationSpoId: item.kgEntityRelationSpoId,
        status: 1,
      };
      this.$confirm(`是否删除当前关系`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await this.$axios.get(
            this.$api.knowledgeMap.disableRelation,
            {
              params,
            }
          );
          if (res.data.code === 200) {
            this.$message.success(`删除成功`);
            // this.relationList();
            this.tableList[pIndex].relationList.splice(cIndex, 1);
            return;
          }
          this.$message.warning(res.data.message);
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
    onSubmit() {
      this.relationList();
    },
    openDia(row) {
      if (row) {
        this.mapForm1.headName = row;
        this.changeEntitydisAbled = true;
      } else {
        this.mapForm1.headName = {};
        this.changeEntitydisAbled = false;
      }
      this.getEntityListByProjectId();
      this.dialogVisible = true;
      this.title = "新增关系";
    },
    cancel() {
      this.$refs.relationForm.resetFields();
      this.mapForm.percentage = 1;
      this.dialogVisible = false;
      this.changeEntitydisAbled = false;
    },

    getRelationById(val, type) {
      // 选择实体是图片
      if (val.entityStatus == 1) {
        this.$refs[
          type == "head" ? "headSelectRef" : "endSelectRef"
        ].$el.children[0].children[0].setAttribute(
          "style",
          `background: url(${val.entityName}) no-repeat;
          width: 30px;
          border: none;
          background-position: 80% center;
          background-size: 65%;
          `
        );
      } else {
        // 非图片清空style
        this.$refs[
          type == "head" ? "headSelectRef" : "endSelectRef"
        ].$el.children[0].children[0].removeAttribute("style");
      }
    },

    async save() {
      console.log("");
      if (
        this.mapForm1.headName == "" ||
        this.mapForm1.endName == "" ||
        this.mapForm1.relation == ""
      ) {
        this.$message.warning("请填写完整信息");
        return;
      }
      if (
        this.mapForm.percentage &&
        !this.validConfidence(this.mapForm.percentage)
      ) {
        this.$message.warning("置信度只能是0或1或0~1之间的小数,小数最多四位");
        return;
      }
      const { relation } = this.mapForm1;
      let params = {
        sourceEntityId: this.mapForm1.headName.entityId,
        tailEntityId: this.mapForm1.endName.entityId,
        relationName: relation.relationName
          ? relation.relationName
          : this.$refs.relationInput.value,
        relationId: relation.relationId ? relation.relationId : null,
        projectId: this.$store.state.knowledgeMap.projectMsg.projectId,
        confidence: this.mapForm.percentage,
      };
      console.log("paramsparams", params);

      let res = await this.$axios.post(
        this.$api.knowledgeMap.addKgEntityRelation,
        params
      );
      const { data, code, msg } = res.data;
      if (code == 200) {
        console.log("msgmsg", msg);
        this.relationList();
        this.mapForm.percentage = 1;
        this.$refs.relationForm.resetFields();
        this.dialogVisible = false;
        this.changeEntitydisAbled = false;
      } else {
        this.$message.error(msg);
      }
    },

    // 检验输入数据是否是数字
    isNumber(val) {
      var regPos = /^\d+(\.\d+)?$/; //非负浮点数
      var regNeg =
        /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
      if (regPos.test(val) || regNeg.test(val)) {
        return true;
      } else {
        return false;
      }
    },
    handleClose() {
      this.$refs.relationForm.resetFields();
      this.dialogVisible = false;
    },
    mapTree() {
      let params = {
        projectId: this.$store.state.knowledgeMap.projectMsg.projectId,
      };
      this.$axios
        .post(this.$api.knowledgeMap.mapTree, params)
        .then((res) => {
          const { data, message, code } = res.data;
          if (code == 200) {
            this.optionsType = data;
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // querySearchAsync(queryString, cb) {
    //   var restaurants = this.relationCon;
    //   var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
    //   clearTimeout(this.timeout);
    //   this.timeout = setTimeout(() => {
    //     cb(results);
    //   }, 1000 * Math.random());
    // },
    // createStateFilter(queryString) {
    //   return (state) => {
    //     return (state.relationName.indexOf(queryString) === 0);
    //   };
    // },
    // querySearchAsyncTail(queryString, cb) {
    //   var restaurants = this.tailCon;
    //   var results = queryString ? restaurants.filter(this.createStateFilterTail(queryString)) : restaurants;
    //   clearTimeout(this.timeout);
    //   this.timeout = setTimeout(() => {
    //     cb(results);
    //   }, 1000 * Math.random());
    // },
    // createStateFilterTail(queryString) {
    //   return (state) => {
    //     return (state.entityName.indexOf(queryString) === 0);
    //   };
    // },

    async getEntityListByProjectId() {
      const params = {
        projectId: this.$store.state.knowledgeMap.projectMsg.projectId,
      };
      let res = await this.$axios.get(
        this.$api.knowledgeMap.getEntityListByProjectId,
        {
          params,
        }
      );
      const { data, msg, code } = res.data;
      if (code == 200) {
        this.selectProperty = data;
        this.tarTail = data;
      } else {
        this.$message.warning(msg);
      }
    },

    getPublicRelationList() {
      const params = {
        sourceOntologyId: this.mapForm1.headName.ontologyId,
        tailOntologyId: this.mapForm1.endName.ontologyId,
      };
      this.$axios
        .get(this.$api.knowledgeMap.getPublicRelationList, {
          params,
        })
        .then((res) => {
          const { data, msg, code } = res.data;
          if (code == 200) {
            this.relationOptions = data;
          } else {
            this.$message.warning(msg);
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    },

    handleSelectHead(item) {
      this.mapForm.headName = item.entityId;
    },
    handleSelectRelation(val) {
      console.log("val", val, this.mapForm1.relation);
      Object.assign(this.tarRelation, val);
      this.getEntityByRelationId(val.relationId);
    },
    async changeSelectRelation(val) {
      // if (this.$refs.relationInput.value) {
      //   this.tarRelation.relationName = this.$refs.relationInput.value;
      //   this.tarRelation.relationId = '';
      //   this.tailCon = this.headOrTail
      // }
    },
    handleSelectTail(item) {
      this.mapForm.endName = item.entityId;
    },
    blurSelectRelation() {},
    formatCheck(value) {
      if (!/^(0|1|(0\.\d{1,4}))$/g.test(value)) {
        this.$message.warning("置信度只能是0或1或0~1之间的小数,小数最多四位");
      }
    },
    validConfidence(val) {
      if (!/^(0|1|(0\.\d{1,4}))$/g.test(val)) {
        return false;
      } else {
        return true;
      }
    },
  },
  watch: {
    "$store.state.knowledgeMap.projectMsg.projectId": {
      handler(val, old) {
        if (val !== old) {
          this.mapTree();
        }
      },
      deep: true,
      immediate: true,
    },
    mapForm1: {
      handler(val, old) {
        if (val.headName && val.endName) {
          this.getPublicRelationList();
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.entity-manage {
  position: relative;
  height: 100%;
  padding-bottom: 24px;
  box-sizing: border-box;
}
.entity-type,
.entity-list {
  height: 100%;
}

.server-main {
  position: relative;
  height: 100%;

  .search-form {
    padding: 0 32px;
    min-height: 72px;
    background: #ffffff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .el-form-item {
      margin-bottom: 0;
      margin-right: 32px;
    }

    .el-form-item:nth-of-type(4) {
      margin-right: 10px;
    }
  }

  .form-input {
    // flex: 1;

    /deep/ .el-input__inner {
      width: 100%;
      height: 32px;
    }

    /deep/ .el-form-item__content {
      width: calc(100% - 70px);
      max-width: 240px;
    }

    /deep/ .el-select {
      width: 100%;
    }

    /deep/ .el-cascader {
      width: 100%;
    }
  }

  .server-table {
    background: #ffffff;
    padding: 16px 32px 20px;
    min-height: calc(100% - 136px);

    .table-title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .table-title-text {
        border-left: 5px solid #4b71eb;
        padding-left: 10px;
        font-size: 16px;
        line-height: 16px;
      }

      margin-bottom: 10px;
    }

    .el-table {
      .operation {
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }

    /deep/ .cell {
      text-align: center;
    }

    .handle-button {
      margin-right: 10px;
    }

    .little-circle-blue {
      width: 6px;
      height: 6px;
      background: #55c898;
      display: inline-block;
      border-radius: 6px;
      line-height: 6px;
      margin-right: 6px;
      margin-bottom: 2px;
    }

    .little-circle-red {
      width: 6px;
      height: 6px;
      background: #ee5564;
      display: inline-block;
      border-radius: 6px;
      line-height: 6px;
      margin-right: 6px;
      margin-bottom: 2px;
    }
  }

  .pagination {
    position: relative;
    margin-top: 28px;
    height: 40px;

    .table-pagination {
      position: absolute;
      right: 0;

      /deep/ .el-input__inner {
        height: 22px;
      }
    }
  }
}

.map-dialog {
  .form-select {
    width: 100%;
  }

  .form-link {
    line-height: initial;
  }

  /deep/ .el-dialog__header {
    border-bottom: 2px solid #e5e6e9;
  }

  /deep/ .el-dialog__body {
    padding-bottom: 0;
  }

  .percentage {
    width: 100%;
  }

  .autocomplete-input {
    width: 100%;
  }
}

.common-dialog {
  /deep/ .el-dialog {
    border-radius: 4px;
  }

  /deep/ .el-dialog__header {
    padding: 20px;
    padding-left: 32px;
  }

  /deep/ .el-dialog__title {
    font-size: 18px;
    font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
    color: #333333;
  }

  /deep/ .el-dialog__body {
    padding: 42px 60px 0 60px;
  }

  /deep/ .el-input__inner {
    height: 32px;
  }

  /deep/ .el-form-item__label {
    color: #333333;
  }

  /deep/ .el-button {
    width: 68px;
    height: 32px;
    padding: 6px;
    margin-left: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 0;
  }
}

/deep/ .el-table__body-wrapper {
  .el-table__expanded-cell {
    z-index: 100;
    padding: 0;
  }
}
/deep/ .el-table__fixed,
/deep/.el-table__fixed-right {
  .el-table__expanded-cell {
    visibility: hidden;
    padding: 0;
  }
}
</style>
